<template>
	<view class="match-item" :class="{end: item.status == 5}" @click="go">
	  <view class="imgW">
	    <image :src="item.image_desc || item.image_text" class="img" mode="aspectFill"></image>
	    <view v-if="item.type_id == 3 || type == 1" class="icon" :class="{'bg-red': item.status == 3, 'bg-origin': item.status == 2, 'bg-primary': item.status ==4, 'bg-end': [5,0].includes(item.status)}">
        <!-- status 1 - 待报名, 2-报名中, 3-待开赛, 4-开赛中, 5-已结束, 0-下架 -->
	      <template v-if="item.status == 3">待开赛</template>
	      <template v-else-if="item.status == 2">报名中</template>
	      <template v-else-if="item.status == 5">已结束</template>

	      <template v-else-if="item.status == 1">待报名</template>
	      <template v-else-if="item.status == 4">开赛中</template>
	      <template v-else-if="item.status == 0">已下架</template>
	    </view>
	    <!-- <view class="address flex-lect">
	      <u-icon name="map" size="18" color="#fff"></u-icon>
	      <text class="t">阜阳</text>
	    </view> -->
	  </view>
	  <view class="div">
	    <view class="name u-line-2">{{item.title || item.name}}</view>
	    <view class="hours">
	      <view v-if="item.views" class="">{{item.views}}+阅读</view>
	      <view class="">{{item.release_time_desc}}</view>
	    </view>
	  </view>
	</view>
</template>

<script>
export default {
	name: 'Layout',
	props: {
		//类型，到不同的页面
		item: {
			type: Object,
			default: {}
		},
    type: {
    	type: Number,
    	default: 1, // 1-赛事列表 0-非赛事列表（需要根据自己的item.type_id 去判断）
    }
	},

	data() {
		return {
      index:0
    };
	},
	methods: {
		go(){
      console.log('this.item---', this.item)
      this.$emit('toDetail',this.item)
    },
	}
};
</script>

<style lang="scss" scoped>
.empty{
  text-align: center; padding: 50rpx 0 100rpx;
  .img{display: block; width: 128rpx; height: 128rpx; margin: 0 auto 30rpx;}
  .tip{color: #888; font-size: 26rpx;}
}
</style>
